import styles from './index.less'
import React from "react";
import VideoItems from '@/components/video-items';
import {IconArrowLeft} from '@douyinfe/semi-icons';
import {history} from 'umi'
import videoAPI from '@/api/model/video'
import {IllustrationNoResult, IllustrationNoResultDark} from "@douyinfe/semi-illustrations";
import {Empty} from "@douyinfe/semi-ui";
import Loading from '@/components/loading';

class PrvideoItem extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            // @ts-ignore
            loading: true,
            videoList: [],
            categoryName: ''
        }
        this.getVideoList = this.getVideoList.bind(this)
    }

    goHome = () => {
        history.push('/')
    }

    componentDidMount() {
        const category = window.sessionStorage.getItem('category')

        console.log('category', category)
        this.getVideoList(category)
        // 重置滚动条
        window.scrollTo(0, 0);
    }

    async getVideoList(id: any) {
        const categoryName = window.sessionStorage.getItem('categoryName')

        const res = await videoAPI.getCategoryVideoList({id})
        this.setState({videoList: res.data, loading: false, categoryName})
    }

    render() {
        const emptyStyle = {
            padding: 30,
        };
        const {videoList, categoryName, loading}: any = this.state
        return (
            <>
                {
                    loading ? <Loading/> :
                        <div className={['container', styles.prvideo_item_container].join(' ')}>
                            <div className={styles.type_title} onClick={this.goHome}>
                                <IconArrowLeft style={{fontSize: '24px', marginRight: '10px'}}/>
                                <span>{categoryName}</span>
                            </div>
                            {
                                videoList.length == 0 ?
                                    <Empty
                                        image={<IllustrationNoResult style={{width: 150, height: 150}}/>}
                                        darkModeImage={<IllustrationNoResultDark style={{width: 150, height: 150}}/>}
                                        description={'没有视频啦'}
                                        style={emptyStyle}
                                    />
                                    : ''
                            }
                            <VideoItems videoList={videoList}/>
                        </div>
                }
            </>

        )
    }
}

export default PrvideoItem
